<template>
  <div class="pgmain">
    <!-- 上肢功能评估量表 UEFI  -->
    <div class="pgquestionbox beautifulScroll">
      <a-form ref="formRef" :rules="formRules" :model="formModel">
        <div class="pgquestion" v-for="(item, index) in pgdata" :key="item.id">
          <a-form-item :field="String(item.id)">
            <div class="pgname">{{ item.name }}</div>
            <div class="pgchoicebox">
              <a-radio-group
                :disabled="Evaluationshow"
                v-if="item.type == undefined"
                v-model="formModel[item.id]"
                :options="item.des"
              ></a-radio-group>
              <div v-else>
                <a-input
                  :disabled="Evaluationshow"
                  :style="{ width: '320px' }"
                  v-model="formModel[item.id]"
                  placeholder="备注"
                  allow-clear
                />
              </div>
            </div>
          </a-form-item>
        </div>
      </a-form>
    </div>
    <div class="pgckbox beautifulScroll">
      <img
        ref="nativeImg"
        src="@/assets/images/yiyu.png"
        style="display: none"
      />
      <!-- <img src="@/assets/images/guanjieyan.png" alt="" class="pgckboximg" /> -->
      <a-image class="pgckzz" :src="nativeImg?.src" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { saveEvaluation } from '@/api/pingu';
  const nativeImg = ref<HTMLImageElement | null>(null);
  // 评估名称
  const title = ref('汉密尔顿抑郁表');
  const props = defineProps({
    // 定义patientTreatmentId属性，指定类型为字符串
    patientTreatmentId: {
      type: String,
      required: true, // 如果父组件必须传递该属性，可设为true
      // 可选：设置默认值（当required为false时生效）
      // default: 'default-id'
    },
    Evaluationshow: {
      type: Boolean,
    },
    Evaluationdata: {
      type: Object,
    },
  });
  const Evaluationshow = ref(props.Evaluationshow);
  const patientTreatmentId = ref(props.patientTreatmentId);
  const Evaluationdata = ref(props.Evaluationdata);
  const pgdata = [
    {
      id: 1,
      name: '1、抑郁情绪',
      des: [
        { label: '无症状', value: '0' },
        { label: '只在问到时才诉述', value: '1' },
        { label: '在言语中自发地表达', value: '2' },
        {
          label: '不用言语也可从表情、姿势、声音或 欲哭中流露出这种情绪',
          value: '3',
        },
        {
          label:
            '病人的自发语言和非自发语言（表情、动作） ，几乎完全表现 为这种情绪',
          value: '4',
        },
      ],
    },
    {
      id: 2,
      name: '2、有罪感',
      des: [
        { label: '无症状', value: '0' },
        { label: '责备自己，感到自己已连累他人', value: '1' },
        { label: '认为自己犯了罪，或反复思考以往的过失和错误', value: '2' },
        {
          label: '认为目前的疾病，是对自己错误的惩罚，或有罪恶妄想',
          value: '3',
        },
        { label: '罪恶妄想伴有指责或威胁性幻觉', value: '4' },
      ],
    },
    {
      id: 3,
      name: '3、自杀',
      des: [
        { label: '无症状', value: '0' },
        { label: '觉得活着没有意义', value: '1' },
        { label: '希望自己已经死去，或常想到与死有关的事', value: '2' },
        { label: '消极观念（阿自杀念头）', value: '3' },
        { label: '有严重自杀行为', value: '4' },
      ],
    },
    {
      id: 4,
      name: '4、入睡困难',
      des: [
        { label: '无症状', value: '0' },
        { label: '主诉有时有入睡困难，即上床后半小时仍不能入睡', value: '1' },
        { label: '主诉每晚均有入睡困难', value: '2' },
      ],
    },
    {
      id: 5,
      name: '5、睡眠不深',
      des: [
        { label: '无症状', value: '0' },
        { label: '眠浅多恶梦', value: '1' },
        { label: '半夜（晚上12点以前） 曾醒来（不包括上厕所）', value: '2' },
      ],
    },
    {
      id: 6,
      name: '6、早醒',
      des: [
        { label: '无症状', value: '0' },
        { label: '有早醒， 比平时早醒1小时，但能重新入睡', value: '1' },
        { label: '早醒后无法重新入睡', value: '2' },
      ],
    },
    {
      id: 7,
      name: '7、工作和兴趣',
      des: [
        { label: '无症状', value: '0' },
        { label: '提问时才诉述', value: '1' },
        {
          label:
            '自发地直接或间接表达对活动、工作或学习失去兴趣，如感到 没精打采，犹豫不决，不能坚持或需强迫自己去工作或活动',
          value: '2',
        },
        { label: '病室劳动或娱乐不满3小时', value: '3' },
        {
          label:
            '因目前的疾病而停止工作，住院患者不参加任何活动或者没有 他人帮助便不能完成病室日常事务',
          value: '4',
        },
      ],
    },
    {
      id: 8,
      name: '8、迟缓： 指思维和语言 缓慢 ， 注意力难以集 中，主动性减退',
      des: [
        { label: '无症状', value: '0' },
        { label: '精神检查中发现轻度迟缓', value: '1' },
        { label: '精神检查中发现明显迟缓', value: '2' },
        { label: '精神检查进行困难', value: '3' },
        { label: '完全不能回答问题（木僵）', value: '4' },
      ],
    },
    {
      id: 9,
      name: '9、激越',
      des: [
        { label: '无症状', value: '0' },
        { label: '检查时表现的有些心神不定', value: '1' },
        { label: '明显的心神不定或小动作多', value: '2' },
        { label: '不能静坐，检查中曾站立', value: '3' },
        { label: '搓手，咬手指，扯头发，咬嘴唇', value: '4' },
      ],
    },
    {
      id: 10,
      name: '10、 精神性焦虑',
      des: [
        { label: '无症状', value: '0' },
        { label: '问到才时诉述', value: '1' },
        { label: '自发地表达', value: '2' },
        { label: '表情和言谈流露明显忧虑', value: '3' },
        { label: '明显惊恐', value: '4' },
      ],
    },
    {
      id: 11,
      name: '11、躯体性焦虑： 指焦虑 的生理症状 ， 包括口 干 、 腹胀 、 腹泻 、 打 呃 、 腹绞痛 、 心悸 、 头 痛 、 过度换气和叹息、以及尿频和出汗等',
      des: [
        { label: '无症状', value: '0' },
        { label: '轻度', value: '1' },
        { label: '中度，有肯定的上述症状', value: '2' },
        { label: '重度，上述症状严重，影响生活或需加处理', value: '3' },
        { label: '严重影响生活和活动', value: '4' },
      ],
    },
    {
      id: 12,
      name: '12、胃肠道症状',
      des: [
        { label: '无症状', value: '0' },
        { label: '食欲减退，但不需他人鼓励便自行进食', value: '1' },
        { label: '进食需他人催促或请求或需要应用泻药或助消化药', value: '2' },
      ],
    },
    {
      id: 13,
      name: '13、全身症状',
      des: [
        { label: '无症状', value: '0' },
        {
          label:
            '四肢、背部或颈部沉重感，背痛，头痛，肌肉疼痛，全身乏力 或疲倦',
          value: '1',
        },
        { label: '上述症状明显', value: '2' },
      ],
    },
    {
      id: 14,
      name: '14、性症状： 指性欲减退、月经紊乱等',
      des: [
        { label: '无症状', value: '0' },
        { label: '轻度', value: '1' },
        { label: '不能肯定，或该项对被评者不适合', value: '0.0' },
      ],
    },
    {
      id: 15,
      name: '15、疑病',
      des: [
        { label: '无症状', value: '0' },
        { label: '对身体过分关注', value: '1' },
        { label: '反复考虑健康问题', value: '2' },
        { label: '有疑病妄想', value: '3' },
        { label: '伴幻觉的疑病妄想', value: '4' },
      ],
    },
    {
      id: 16,
      name: '16、 体重减轻',
      des: [
        { label: '无症状', value: '0' },
        { label: '一周内体重减轻1斤以上', value: '1' },
        { label: '一周内体重减轻2斤以上', value: '2' },
      ],
    },
    {
      id: 17,
      name: '17、自知力',
      des: [
        { label: '知道自己有病，表现为忧郁', value: '0' },
        {
          label:
            '知道自己有病，但归于伙食太差、环境问题、工作过忙、病毒 感染或需要休息等',
          value: '1',
        },
        { label: '完全否认有病', value: '2' },
      ],
    },

    {
      id: 18,
      name: '18、评定结论',
      des: [{ label: '0', value: '0' }],
      type: 'tk',
    },

    //   type
  ];

  const formRef = ref();
  const formModel = ref<Record<string, string>>({});

  const formRules: Record<string, any[]> = {};

  pgdata.forEach((item) => {
    formModel.value[item.id] = '';
    formRules[item.id] = [
      { required: true, message: '必填', trigger: 'change' },
    ];
  });
  if (Evaluationdata.value && Object.keys(Evaluationdata.value).length > 0) {
    // 只有当Evaluationdata.value存在且不是空对象时才赋值
    formModel.value = { ...Evaluationdata.value };
    console.log('查看模式回显的数据处理完成', formModel.value);
  }
  const scoresSum = ref(0);
  // 计算总和的方法
  const calculateSum = () => {
    let sum = 0;

    // 1. 先获取所有type='tk'的项的id（转为字符串，与表单键名匹配）
    const tkItemIds = pgdata
      .filter((item) => item.type == 'tk')
      .map((item) => item.id.toString());

    // 2. 遍历表单数据，排除tk项和空值
    Object.entries(formModel.value).forEach(([key, value]) => {
      // 跳过条件：是tk项 或 值为空
      if (tkItemIds.includes(key) || value == '' || value == undefined) {
        return;
      }

      // 累加有效数值
      sum += Number(value);
    });

    scoresSum.value = sum;
    console.log('当前成绩', scoresSum.value);
  };

  //提交评估表
  const submitPg = () => {
    // 返回Promise以便父组件捕获状态
    return new Promise((resolve, reject) => {
      formRef.value.validate((errors: any) => {
        if (!errors) {
          // 初始计算一次
          calculateSum();

          saveEvaluation({
            patientTreatmentId: patientTreatmentId.value,
            evaluation: JSON.stringify(formModel.value),
            title: title.value,
            score: scoresSum.value,
          })
            .then((res: any) => {
              if (res.code == 200) {
                console.log('提交评估成功', res.data);
                resolve(res.data); // 成功时返回数据
              } else {
                // 接口返回非200状态视为失败
                reject(new Error(`提交失败: ${res.msg || '未知错误'}`));
              }
            })
            .catch((error: any) => {
              // 捕获接口调用异常
              console.error('提交评估失败', error);
              reject(new Error(`网络错误: ${error.message}`));
            });
        } else {
          // 表单验证失败
          reject(new Error('表单验证失败，请检查输入'));
        }
      });
    });
  };
  defineExpose({
    submitPg,
  });
</script>
<style scoped>
  .pgmain {
    height: 100%;
    display: flex;
  }
  .pgckbox {
    height: 600px;
    width: 600px;
    overflow: hidden;
    overflow-y: auto;
  }

  :deep(.pgckzz .arco-image-img) {
    width: 590px;
    height: 1587px;
    cursor: pointer;
  }
  .pgquestionbox {
    width: 600px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 600px;
  }
  .pgckboximg {
    width: 590px;
    height: 1301px;
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
  }
  .pgquestion {
    display: flex;
  }
  .pgname {
    font-size: 18px;
  }
  .pgchoicebox {
    display: flex;
    flex-direction: column;
    font-size: 18px;
    margin-top: 10px;
  }
  :deep(.pgchoicebox .arco-radio-label) {
    font-size: 18px !important;
  }

  :deep(.pgquestionbox .arco-form-item-content-flex) {
    flex-direction: column !important;
    align-items: normal !important;
    justify-content: normal !important;
  }

  :deep(.pgquestionbox .arco-col-5) {
    flex: 0 !important;
    width: 0 !important;
  }
  :deep(.pgquestionbox .arco-radio-group) {
    display: flex;
    flex-direction: column;
  }
  :deep(.arco-radio) {
    margin: 6px 0;
  }
</style>
